<link rel="stylesheet" href="files/css/libs/foundation/foundation.min.css">
<link rel="stylesheet" href="files/css/libs/foundation/app.css">

<script src="files/js/libs/foundation/modernizr.foundation.js" ></script>

<script>
	
	$(function () {
	
    var chart = new Highcharts.Chart({
	
	    chart: {
	        renderTo: 'container',
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Indice de cobranza(%)'
	    },
	    
	    pane: {
	        startAngle: -150,
	        endAngle: 150,
	        background: [{
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#FFF'],
	                    [1, '#333']
	                ]
	            },
	            borderWidth: 0,
	            outerRadius: '109%'
	        }, {
	            backgroundColor: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#333'],
	                    [1, '#FFF']
	                ]
	            },
	            borderWidth: 1,
	            outerRadius: '107%'
	        }, {
	            // default background
	        }, {
	            backgroundColor: '#DDD',
	            borderWidth: 0,
	            outerRadius: '105%',
	            innerRadius: '103%'
	        }]
	    },
	       
	    // the value axis
	    yAxis: {
	        min: 0,
	        max: 100,
	        
	        minorTickInterval: 'auto',
	        minorTickWidth: 1,
	        minorTickLength: 10,
	        minorTickPosition: 'inside',
	        minorTickColor: '#666',
	
	        tickPixelInterval: 30,
	        tickWidth: 2,
	        tickPosition: 'inside',
	        tickLength: 10,
	        tickColor: '#666',
	        labels: {
	            step: 2,
	            rotation: 'auto'
	        },
	        title: {
	            text: '%'
	        },
	        plotBands: [{
	            from: 80,
	            to: 100,
	            color: '#55BF3B' // green
	        }, {
	            from: 50,
	            to: 80,
	            color: '#DDDF0D' // yellow
	        }, {
	            from: 0,
	            to: 50,
	            color: '#DF5353' // red
	        }]        
	    },
	
	    series: [{
	        name: '% Cobranza',
	        data: [0],
	        tooltip: {
	            valueSuffix: ' %'
	        }
	    }]
	
	}, 
	// Add some life
	function (chart) {
		var indice;
		getData({ url:"admin/reports/get_indice_cobranza", data: { ajax:"ajax"}  }, function(response){
				var data= response.data;
				indice=Math.round((data[0].Cobranza / data[0].Total)*100);
			});		
		
		setInterval(function () {
			var point = chart.series[0].points[0],
	            newVal;
	            //,inc = Math.round((Math.random() - 0.5) * 20);
	        //point.y + inc
	        newVal = indice;
	        /*if (newVal < 0 || newVal > 100) {
	            newVal = point.y - inc;
	        }
	        */
	        point.update(newVal);
	        
	    }, 3000);
	});
});
</script>

<script src="files/js/highcharts.js"></script>
<script src="files/js/highcharts-more.js"></script>
<script src="files/js/modules/exporting.js"></script>

<div class="row" style="margin-top: 20px">
	<div class="three columns" > </div>
		
	<div class="nine columns">
		<h4>Indice de Cobranzas(%)</h4>
	</div>
</div>	

<div class="row">
	<div class="twelve columns">
	<div id="container" style="width: 400px; height: 300px; margin: 0 auto"> </div>
	</div>
</div>



